<template>

    <div class="all_box_books">
      <el-row class="books_order_method">
        <span>排序方式： </span>
        <el-button-group>
          <el-button type="info" @click.native="orderByZan">评分最高</el-button>
          <el-button type="info" @click.native="orderByDownNum">下载最多</el-button>
          <el-button type="info" @click.native="orderByTime">最新</el-button>
        </el-button-group>
      </el-row>
      <el-row class="books_area" >
        <el-col :span="5" :offset="2" v-for="book in booklist">

            <div class="el-card" v-show="book.status" >
              <router-link class="to_details" :to="{path: 'bookdetails', query: {bookId: book.id}}">
                <div class="book_pic">
                  <img :src=book.faceAddr class="image" />
                </div>

                <div class="charactor">
                  <div class="book_tittle">
                    {{book.name}}
                  </div>

                  <div class="inro">
                    {{book.intro}}
                  </div>
                </div>
              </router-link>

              <div class="order_info">
                <el-button-group>
                  <el-button type="info" icon="el-icon-star-on" @click="tapRate(book.rateAddr)" >{{book.rate}}</el-button>
                  <el-button type="info" icon="el-icon-download" @click="tapDownloadFree(book.id, book.downAddr, book.downNum)" v-if="!book.price">{{book.downNum}}</el-button>
                  <el-button type="info" icon="el-icon-sold-out" @click="tapDownloadSold(book.id, book.downAddr, book.downNum, book.price, book.name)" v-if="book.price">{{book.downNum}}</el-button>
                </el-button-group>
              </div>
            </div>

        </el-col>

      </el-row>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryBooksInfo.pageNum" :page-sizes="[6,9,15,21]" :page-size="queryBooksInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
</template>

<!-- 定义JS变量 -->
<script>
export default {
  name: 'searched',
  created () {
    this.getsearchedbooklist()
    this.getUserTokenInfo()
  },
  data () {
    return {
      booklist: [
        {
          faceAddr: '',
          name: '',
          intro: ''
        }
      ],
      queryBooksInfo: {
        query: this.newQuery, //定义查询参数
        searchQueryType: 1,
        orderQueryType: 0,
        pageNum: 1,
        pageSize: 9
      },
      total: 0,
      queryTest: this.newQuery,
      user: {}
    }
  },
  methods: {
    async getsearchedbooklist () {
      const {
        data: res
      } = await this.$http.get('/book/searchall', {
        params: this.queryBooksInfo
      })
      if (res.status !== 200) return this.$message.error('查询失败')
      this.booklist = res.data.rows
      this.total = res.data.total
      console.log(res.data.rows)
      // console.log("-----"+this.$children[0])
    },
    async getUserTokenInfo(){
      const {
        data: res
      } = await this.$http.get(`/user/getUserTokenInfo/${window.sessionStorage.getItem('userId')}`)
      this.user = res.data
      console.log(res.data)
    },
    handleSizeChange(size) {
      this.queryBooksInfo.pageSize = size
      this.getsearchedbooklist()
    },
    //页码值变化时 调用
    handleCurrentChange(current) {
      this.queryBooksInfo.pageNum = current
      this.getsearchedbooklist()
    },
    orderByZan() {
      console.log("zan+++++"+this.queryBooksInfo.query)
      console.log("zan+++++"+this.$store.getters.getQuery)
      console.log("zan------"+this.queryTest)
      this.queryBooksInfo.orderQueryType = 1
      this.getsearchedbooklist()
    },
    orderByDownNum() {
      this.queryBooksInfo.orderQueryType = 2
      this.getsearchedbooklist()
    },
    orderByTime() {
      this.queryBooksInfo.orderQueryType = 3
      this.getsearchedbooklist()
    },
    tapRate(rateAddr){
      // console.log(id)
      window.open(rateAddr)
    },
    tapDownloadFree(bookId,addr,downNum){
      if(!this.$store.getters.getUserLoginState){
        this.$message.error(' 请先登录')
        setTimeout(function(){
          window.open('/login','_self')
          // this.$router.push('/login')
        },1000)
        return
      }
      if(!this.user.downRight){
        this.$message.error('对不起，无下载权限')
        return
      }
      // this.verifyDownload(addr)
      console.log(bookId+"------"+addr)
      downNum++
      this.$http.put(`/userOper/download/${this.$store.getters.getUserId}/${bookId}`)
      this.$http.put(`/book/download/${bookId}/${downNum}`)
      window.open(addr)
      // window.open(addr)
    },
    tapDownloadSold(bookId,addr,downNum,price,bookName){
      if(!this.$store.getters.getUserLoginState){
        this.$message.error(' 请先登录')
        setTimeout(function(){
          window.open('/login','_self')
          // this.$router.push('/login')
        },1000)
        return
      }
      if(!this.user.downRight){
        this.$message.error('对不起，无下载权限')
        return
      }
      // this.verifyDownload(addr)
      console.log(bookId+"------"+addr)
      downNum++
      this.$http.put(`/userOper/download/${this.$store.getters.getUserId}/${bookId}`)
      this.$http.put(`/book/download/${bookId}/${downNum}`)
      // this.$router.push("/payment?bookId="+)
      this.$router.push({ name: 'payment',params:{userId:window.sessionStorage.getItem('userId'), bookId:bookId, bookName:bookName, bookPrice:price, downAddr:addr} })
      // window.open(addr)
    },
    verifyDownload(addr){
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
  watch:{
    newQuery :function(){
      console.log("watch+++++"+this.queryBooksInfo.query)
      console.log("watch+++++"+this.$store.getters.getQueryStore)
      this.queryBooksInfo.query = this.$store.getters.getQueryStore
      this.queryBooksInfo.searchQueryType = this.$store.getters.getSearchQueryType
      console.log("watchAfter+++++"+this.queryBooksInfo.query)
      console.log("watchAfter+++++"+this.$store.getters.getQueryStore)
      this.getsearchedbooklist()
    },
    immediate: true
  },
  computed: {
      // 计算属性的 getter
      newQuery: function () {
        // `this` 指向 vm 实例
        return this.$store.getters.getQueryStore
      },
      newQueryType: function(){
        return this.$store.getters.getSearchQueryType
      }
    }
}
</script>

<!-- 防止组件冲突 -->
<style lang="less" scoped>
.all_box_books {
    margin: 0 auto;
    width: 100%;

    .books_order_method {

      // color: black;
      .el-button-group {
        .el-button {
          color: black;
          background-color: #909399;
        }
      }
    }

    .books_area {
      // position: relative;
      margin-bottom: 20px;


      .el-col {
        .to_details {
          text-decoration: none;
        }

        .el-card {
          height: 288px;
          width: 250px;
          position: relative;
          // padding: 0;
          border: none;
          background-color: #F7F9FB;

          .book_pic{
            background-color: #EBF1F5;
            // margin-top: 0;
            .image {
              // width: 100%;
              height: 160px;
              margin: 0 auto;
              display: block;
            }
          }


          .charactor {
            margin-top: 10px;
            position: absolute;
            left: 10px;

            // background-color: #F7F9EB;
            .book_tittle {
              font-size: large;
              font-weight: bold;
              color: #203455;
            }

            .inro {
              color: black;
              // font-family: 'SimHei';
              // font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
              // font-family: Helvetica,Arial,sans-serif;
              font: 14px / 1.62 Helvetica, Arial, sans-serif;
            }

          }

          .order_info {
            position: absolute;
            bottom: 8px;
            left: 20px;
            // background-color: green;

            .el-button-group {
              // margin: 0 auto;
              .el-button {
                padding: 0;
                width: 105px;
                height: 30px;
                // border: none;

              }
            }
          }
        }
      }
    }
  }


</style>
